<template>
	<div class="level gray">
		<h4>医院</h4>
		<div class="content">
			<div class="left">等级:</div>
			<div class="right">
				<ul class="hospital">
					<li :class="{ active: active === '' }" @click="onclick('')">全部</li>
					<li
						v-for="item in data"
						:key="item.value"
						:class="{ active: active === item.value }"
						@click="onclick(item.value)">
						{{ item.name }}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { getHospitalLeveAndRegionList } from '@/api/home';
import { HospitalLevelAndRegionArr } from '@/api/home/type';
import { onMounted, ref } from 'vue';

const emits = defineEmits(['change']);

let data = ref<HospitalLevelAndRegionArr>([]);
let active = ref<string>('');

// 获取医院等级
function getDate() {
	getHospitalLeveAndRegionList('HosType').then((res) => {
		if (res.code === 200) {
			data.value = res.data;
		}
	});
}

onMounted(() => {
	getDate();
});

// 点击事件回调
function onclick(v: string) {
	active.value = v;
	emits('change', v);
}
</script>

<style scoped lang="scss">
.level {
	h4 {
		font-weight: 900;
		margin: 20px 0;
	}
	.content {
		display: flex;
		font-size: 15px;
		.left {
			margin-right: 20px;
		}
		.right {
			.hospital {
				display: flex;
				list-style: none;
				li {
					margin-right: 20px;
					cursor: pointer;
					&.active,
					&:hover {
						color: var(--text-color-blue);
					}
				}
			}
		}
	}
}
</style>
